<template>
	<div class="grid_page">
		<div class="part_1">
			<div class="title">初识 Gird</div>
			<div class="text_con">gird布局十分简单，只需要将display属性设置为grid即可；默认情况下，CSS Grid的列是独占一行的（单列布局），其宽度随父元素的宽度。</div>
			<div class="view_content">
				<div class="left_code">
					<pre><code>{{ grid1Code }}</code></pre>
				</div>
				<div class="right_view">
					<Grid1></Grid1>
				</div>
			</div>
			<div class="text_con">上面我们可以看出：栅格父元素不设置高度，由其子元素高度撑开。如果我们设置父元素高度，不设置子元素高度会怎样呢？结果是子元素会平分父元素的高度，但如果子元素内容有高度，则字允素高度最小为子元素内容高度，再多就会超出父元素。</div>
			<div class="view_content">
				<div class="left_code">
					<pre><code>{{ grid2Code }}</code></pre>
				</div>
				<div class="right_view">
					<Grid2></Grid2>
				</div>
			</div>
			<div class="text_con">grid默认情况下是单列布局，如果想多列布局，需要配合使用 grid-template-columns 属性设置列、 gap 属性设置间隔。</div>
			<div class="view_content">
				<div class="left_code">
					<pre><code>{{ grid3Code }}</code></pre>
				</div>
				<div class="right_view">
					<Grid3></Grid3>
				</div>
			</div>
			<div class="text_con">上面可以看出，设置了间隔后子元素超出了父元素范围，所以一般 grid-template-columns 推荐使用 fr 作为列的占比单位。例：grid-template-columns: 1fr 3fr; 表示将父元素分为四份，第一列占1/4，第二列占3/4，而且它是将父元素宽度减去间隔宽度再分配，保证子元素不会超出父元素。而且 fr 单位能保证父元素挤压时，子元素的宽度最小为内容的宽度。这里我们给子元素设置了文字不换行，缩小父元素宽度看看两个不同单位的效果。</div>
			<div class="view_content">
				<div class="left_code">
					<pre><code>{{ grid4Code }}</code></pre>
				</div>
				<div class="right_view">
					<Grid4 @unitChange="unitChange"></Grid4>
				</div>
			</div>
			<div class="text_con">除了列，我们还可以用 grid-template-rows 来设置行高的比例</div>
			<div class="view_content">
				<div class="left_code">
					<pre><code>{{ grid5Code }}</code></pre>
				</div>
				<div class="right_view">
					<Grid5></Grid5>
				</div>
			</div>
			<div class="text_con">当我们需要一行分很多列该怎么写呢，不可能100列就写100个1fr吧，所以给出了这个写法： grid-template-columns: repeat(7, 1fr)，使用 repeat 属性，第一个参数表示多少列，第二个表示占比。</div>
			<div class="view_content">
				<div class="left_code">
					<pre><code>{{ grid6Code }}</code></pre>
				</div>
				<div class="right_view">
					<Grid6></Grid6>
				</div>
			</div>
			<div class="text_con">grid对齐方式：grid对齐方式和flex布局很像，默认会将孩子容器的大小拉伸到列分配的空间大小，这点和Flow布局中的div将水平拉伸以填充其容器很像。但使用justify-items就可以让子元素自适应宽度，不过这个属性会对所有的子元素产生影响，如果你想要特定子宽度自适应，则可以给特定子元素加上just-self属性</div>
			<div class="view_content">
				<Grid8></Grid8>
				<Grid7></Grid7>
			</div>
			<div class="text_con">如果你想要重复的 1：2的布局，只需要这么写： grid-template-columns: repeat(3, 1fr 2fr);</div>
			<div class="view_content">
				<Grid9></Grid9>
			</div>
			<div class="text_con">
				<a href="https://cssgridgarden.com/">一个grid学习网站，让你可以想玩游戏一样学习grid布局。</a>
			</div>
		
		</div>
	</div>
</template>
<script setup>
import { ref } from 'vue'
import Grid1 from './components/grid1.vue';
import Grid2 from './components/grid2.vue';
import Grid3 from './components/grid3.vue';
import Grid4 from './components/grid4.vue';
import Grid5 from './components/grid5.vue';
import Grid6 from './components/grid6.vue';
import Grid7 from './components/grid7.vue';
import Grid8 from './components/grid8.vue';
import Grid9 from './components/grid9.vue';

const grid1Code = `<template>
	<div class="white">设置孩子节点的个数：</div>
	<el-slider class="step" v-model="num" :step="1" :min="1" :max="5"></el-slider>
	<div class="parent">
		<div v-for="item in num" :key="item" class="child child-box"></div>
	</div>
</template>
<style lang='scss'>
.parent {
	display: grid;
	width: 200px;	
	.child {
		height: 30px;
		border: 1px solid #2d53fc;	
	}
}
</style>`

const grid2Code = `.parent {
	display: grid;
	width: 80%;
	height: 120px;
	background-color: #000;
	padding: 12px;
	.child {
		width: 100%;
		border: 2px solid #4eb5fa;
		margin-bottom: 12px;
	}   
}`

const grid3Code = `.parent {
	display: grid;
	grid-template-columns: 25% 75%;
	gap: 12px;
}`

const grid4Code = ref(`.parent {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 24px;
}`)
const unitChange = (val) => {
	if (val === 1) {
		grid4Code.value = `.parent {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 24px;
}`	
	} else {
		grid4Code.value = `.parent {
	display: grid;
	grid-template-columns: 25% 75%;
	gap: 24px;
}`	
	}
}

const grid5Code = `.parent {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: 3fr 1fr;
	gap: 12px;
}`

const grid6Code = `.parent {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 12px;	
}`


</script>
<style scoped lang='scss'>
.grid_page {
	display: grid;
	gap: 24px;
	padding: 12px;
	.part_1 {
		padding: 12px 24px;
		background-color: #e4e1e1;
		border: 1px solid #ccc;
		border-radius: 10px;

		.title {
			margin-bottom: 12px;
			font-size: 20px;
			font-weight: 600;
		}

		.view_content {
			display: grid;
			grid-template-columns: 1fr 1fr;
			margin-top: 12px;
			margin-bottom: 12px;
			color: #2666cb;
			background: #1f1f1f;

			&>div {
				padding: 12px;	
			}

			.left_code {
				border-right: 1px solid #ccc;
			}
		}
	}
}
</style>